<template>
	<view class="detail-wrapper" :style="{paddingTop: paddingTop + 'px'}">
		<navBar title="礼品订单详情" :customBack="true" @back="back"/>
		<view class="detail-content" v-if="detailInfo.createdTime">
			<view class="user-info">
				<view class="exp">
					<view class="exp-title">
						<view class="title">快递单号：{{ detailInfo.trackingNumber?detailInfo.trackingNumber:'暂无' }}</view>
						<image
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/copy.png"
							v-if="detailInfo.trackingNumber" @click="onCopy(detailInfo.trackingNumber)"></image>
					</view>
					<view class="status">
						<text v-if="detailInfo.status == 0" style="color:#F55932">待生效</text>
						<text v-if="detailInfo.status == 1" style="color:#F68B53">待发货</text>
						<text v-if="detailInfo.status == 4" style="color:#1EC48A">已完成</text>
						<text v-if="detailInfo.status == 3" style="color:#CF1A1B">待收货</text>
						<text v-if="detailInfo.status == 6" style="color:rgba(0,0,0,0.45)">已取消</text>
					</view>
				</view>
				<view class="address-info">
					<view class="atv-img">
						<image :src="detailInfo.avatarUrl?detailInfo.avatarUrl:'../../static/currentImg.png'"></image>
					</view>
					<view class="address">
						<view class="phone">{{detailInfo.userName}}
							{{detailInfo.phone?(detailInfo.phone).replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2'):''}}
						</view>
						<view class="info">
							{{detailInfo.province + detailInfo.city+detailInfo.country+detailInfo.detailAddress}}
						</view>
					</view>
				</view>
			</view>
			<view class="goods-info">
				<view class="goods-detail">
					<view class="goods-img">
						<image
							:src="detailInfo.picUrl?detailInfo.picUrl:'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/goods_default_square.png'">
						</image>
					</view>
					<view class="info">
						<view class="goods-name">{{ detailInfo.giftName }}</view>
						<view class="goods-type">礼品来源：{{ detailInfo.sourceName }}</view>
						<view class="goods-date">获取时间：{{ detailInfo.createdTime }}</view>
					</view>
				</view>
				<view class="btn">
					<view class="btn-box">
						<u-button type="primary" v-if="detailInfo.status == 3" text="确认收货" size="small"
							@click="show=true"></u-button>
						<u-button type="primary" v-if="detailInfo.status == 1" text="提醒发货" size="small"
							@click="onRemind()"></u-button>
						<u-button v-if="detailInfo.status == 0" text="修改地址" size="small" @click="onUpdateAdress()">
						</u-button>
					</view>

				</view>
			</view>
		</view>
		<u-modal :show="show" @confirm="onConfirm" :showCancelButton="true" content="是否收到商品？" @cancel="show=false">
		</u-modal>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				detailInfo: {},
				paddingTop: '',
				show: false,
				currentId: '',
				adressInfo: {},
				currId:''
			}
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
		},
		methods: {
			back(){
				uni.navigateBack({});
			},
			//初始化
			async getDetailInfo(id) {
				this.currentId = id
				try {
					const res = await this.$request({
						method: 'get',
						url: '/ltb-center/giftRecords/detail',
						data: {
							id: id
						}
					})
					this.detailInfo = res.datas
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
				uni.stopPullDownRefresh();
			},
			//提醒发货
			onRemind() {
				uni.showToast({
					title: '提醒成功'
				})
			},
			//确认收货
			async onConfirm() {
				try {
					const res = await this.$request({
						method: 'get',
						url: '/ltb-center/giftRecords/confirm',
						data: {
							id: this.detailInfo.id
						}
					})
					uni.showToast({
						title: '已确认收货',
					})
					this.getDetailInfo(this.currentId)
					this.show = false
				} catch (res) {
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
			},
			//复制
			onCopy(data) {
				uni.setClipboardData({
					data: data, // 复制的内容 
					success: function() {
						console.log('success');
						uni.showToast({
							title: '复制成功',
							duration: 1000
						})
					}
				});
			},
			//修改地址
			onUpdateAdress() {
				uni.navigateTo({
					url: '/minePack/user/accountSetting/shippingAddress?type=select',
					events: {
						//获取下级页面传递回来的参数
						getAddressItem: data => {
							uni.navigateBack()
							this.adressInfo = data
							this.$request({
								method: 'post',
								url: '/ltb-center/giftRecords/updateAddress',
								data: {
									"addressId": this.adressInfo.id,
									"id":this.detailInfo.id
								}
							}).then(res => {

							   if(res.datas){
								   uni.showToast({
								   	title: '地址修改成功',
								   })
								   this.getDetailInfo(this.currId)
							   }
							})
						}
					}
				})
			}

		},
		onLoad(option) {
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			uni.showLoading({
				title: '加载中...'
			})
			this.currId = option.id
			this.getDetailInfo(option.id)
		},

	}
</script>

<style lang="scss" scoped>
	.detail-wrapper {
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);

		.detail-content {
			.user-info {
				background: #fff;

				.exp {
					display: flex;
					padding: 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: rgba(0, 0, 0, 0.85);
					font-size: 14px;
					border-bottom: 1px solid #eee;

					.exp-title {
						display: flex;
						flex: 1;
						max-width: calc(100% - 100rpx);

						.title {
							word-wrap: break-all;
							overflow: hidden;
							text-overflow: ellipsis;
							line-break: anywhere;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							text-shadow: 0 0 0.1px currentcolor;
							line-clamp: 1;
							-webkit-box-orient: vertical;
						}

						image {
							width: 36rpx;
							height: 36rpx;
							margin-right: 10rpx;
						}
					}

					.status {
						width: 120rpx;
						text-align: right;
					}
				}

				.address-info {
					display: flex;
					align-items: center;
					padding: 30rpx 32rpx;

					.atv-img {
						width: 124rpx;
						height: 124rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 28rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.address {
						width: calc(100% - 152rpx);

						.phone {
							font-size: 14px;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);

						}

						.info {
							margin-top: 28rpx;
							font-size: 13px;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.45);
							line-break: anywhere;
						}
					}
				}
			}

			.goods-info {
				margin-top: 20rpx;
				background-color: #fff;

				.goods-detail {
					display: flex;
					align-items: center;
					padding: 30rpx 32rpx;

					.goods-img {
						width: 124rpx;
						height: 124rpx;
						margin-right: 28rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info {
						width: calc(100% - 152rpx);

						.goods-name {
							font-size: 14px;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							word-wrap: break-all;
							overflow: hidden;
							text-overflow: ellipsis;
							line-break: anywhere;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							text-shadow: 0 0 0.1px currentcolor;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.goods-type {
							margin-top: 28rpx;
							font-size: 13px;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.45);
							line-break: anywhere;
						}

						.goods-date {
							margin-top: 10rpx;
							font-size: 13px;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.45);
							line-break: anywhere;
						}
					}
				}

				.btn {
					border-top: 1px solid #eee;
					padding: 16rpx 32rpx;
					display: flex;
					justify-content: flex-end;

					.btn-box {
						width: 120rpx;
					}

					/deep/ .u-button {
						width: 120rpx;
					}
				}
			}
		}
	}
</style>
